import React from "react";
import { Space, Table, Tooltip, Input, message, Modal } from "antd";
import FilterToolBar from "@/components/filter-tool-bar";
import '../styles/ChildDataset.scss'
import {
  DeleteTwoTone,
  EditTwoTone,
  CheckCircleTwoTone,
  CloseCircleTwoTone,
} from "@ant-design/icons";
import api from "@/api";

const btnGroup = [
  [],[
    { type: 'primary', text: '新增', action: 'handleAdd' },
  ]
]

const ChildDataset = ({ isNew, form, list, setList, getChildDataset }) => {

  const handleAdd = () => {
    setList([
      {
        isEdit: true,
        editId: new Date().getTime(),
        name: '',
        remark: '',
      },
      ...list,
    ])
  }

  const handleEdit = (row) => {
    list.forEach((item) => {
      if (item.editId === row.editId) {
        item.isEdit = true;
      }
    });
    setList([...list]);
  };

  const handleDel = (row) => {
    Modal.confirm({
      title: "提示",
      content: `确认删除子数据集【${row.name}】吗？`,
      okText: "确认",
      cancelText: "取消",
      centered: true,
      onOk: () => {
        api.dataset.delete(row).then((res) => {
          message.success("删除成功");
          getChildDataset();
        });
      },
    })
  };

  const handleSave = (row) => {
    if (row.id) {
      // 修改
      api.dataset.update(row).then((res) => {
        message.success("更新成功");
        getChildDataset();
      });
    } else {
      const { id: parent_id, name: parent_name } = form
      const params = {
        parent_id,
        parent_name,
        name: row.name,
        remark: row.remark,
      }
      api.dataset.add(params).then(() => {
        message.success("新增成功");
        getChildDataset();
      })
    }
  };

  
  const handleCancel = (row) => {
    if (isNew) {
      // 新增
      list.forEach((item, index) => {
        if (item.editId === row.editId) {
          list.splice(index, 1);
        }
      });
      setList([...list]);
    } else {
      getChildDataset();
    }
  };

  const handleChangeData = (row, key, value) => {
    list.forEach((item) => {
      if (item.editId === row.editId) {
        item[key] = value;
      }
    });
    setList([...list]);
  };
  const columns = [
    {
      title: "集合名称",
      dataIndex: "name",
      key: "name",
      render: (name, row) => {
        return (
          <span>
            {row.isEdit ? (
              <Input
                key={`${row.editId}.name`}
                value={row.name}
                onChange={(e) => handleChangeData(row, "name", e.target.value)}
              ></Input>
            ) : (
              name
            )}
          </span>
        );
      },
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      render: (remark, row) => {
        return (
          <span>
            {row.isEdit ? (
              <Input
                key={`${row.editId}.remark`}
                value={row.remark}
                onChange={(e) =>
                  handleChangeData(row, "remark", e.target.value)
                }
              ></Input>
            ) : (
              remark
            )}
          </span>
        );
      },
    },
    {
      title: "创建时间",
      dataIndex: "created_on",
      key: "created_on",
      width: 200,
      render: (text) => <span>{text ? text.slice(0, 10) : ''}</span>,
    },
    {
      title: "操作",
      key: "action",
      width: 200,
      render: (_, row) => (
        <div>
          {row.isEdit ? (
            <div>
              <Space size="middle">
                {
                  isNew ? '' : (
                    <Tooltip title="保存">
                      <CheckCircleTwoTone
                        twoToneColor="#82E673"
                        onClick={() => handleSave(row)}
                      />
                    </Tooltip>
                  )
                }
                <Tooltip title={isNew ? '删除' : '取消'}>
                  <CloseCircleTwoTone
                    twoToneColor="#eb2f96"
                    onClick={() => handleCancel(row)}
                  />
                </Tooltip>
              </Space>
            </div>
          ) : (
            <div>
              <Space size="middle">
                <Tooltip title="编辑">
                  <EditTwoTone onClick={() => handleEdit(row)} />
                </Tooltip>
                <Tooltip title="删除">
                  <DeleteTwoTone
                    twoToneColor="#eb2f96"
                    onClick={() => handleDel(row)}
                  />
                </Tooltip>
              </Space>
            </div>
          )}
        </div>
      ),
    },
  ];

  return (
    <div className="child-dataset">
      <h4>子数据集</h4>
      <FilterToolBar btnGroup={btnGroup} handleAdd={handleAdd} />
      <Table columns={columns} dataSource={list} pagination={false} />
    </div>
  );
};

export default ChildDataset;
